<template>
    <div>
        <el-select placeholder="请选择下拉数据" style="width:100%" v-model="svalue">
            <el-option v-for="item  in dataList"  :key="item.id" :label="item.content" :value="item.content"></el-option>
        </el-select>
    </div>

</template>

<script>
export default {
    props: {
        value: {
            type: String
        },
        dicCode:{
            type:String ,
        },
    },
    data() {
        return {
            dataList:[],
            svalue : '',
        }
    },
    watch:{
        //判断下拉框的值是否有改变
        svalue(val, oldVal) {
            // console.log('new: %s, old: %s', val, oldVal)
            if(val!=oldVal){
                this.$emit('input', this.svalue);
            }
        },
    },
    
    mounted(){

        //初始话下拉框的值
        this.svalue=this.value;
    
        let dicCode = this.dicCode ; 
        //【API请求】
        this.$api.getDicValueListByDicCode( { dicCode : dicCode }).then( res =>{
            this.dataList = res.result;
        })

    },

    created() {
        
         
    },
    methods: {

         
    }
}
</script>
<style lang="scss" scope >


    .divImg{
        
        height: 100px;
        display: flex;
        align-items: center;

        .delete-img {
            display: none;
        }


        &:hover{
            .delete-img {
                display: flex;
                position: absolute;
                width: 100px;
                text-align:center;
                justify-content: center;
                align-items: center;
                left: 0px;
                bottom: 0px;
                background: #606266;
                z-index: 999;
                cursor: pointer;
                border-radius: 0px 0px  5px  5px;
                i {
                    margin: 5px  auto;
                    display: block;
                    font-size: 14px;
                    color: white;
                }
            }
        }

    }


    .single-upload{
        .el-upload-list{
            img{
                object-fit: contain;
            }
        }
        .el-upload--picture-card{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            /* img{
                width: 120px;
                height: 120px;
                object-fit: contain;
            } */
        }
    }


    // 上传图片框样式
    .el-upload--picture-card{
        border: 1px dashed #13C3C7;
    }
    .el-upload--picture-card:hover {
        border-color: #13C3C7;
        color: #13C3C7;
    }
    .el-upload--picture-card{
        width: 100px;
        height: 100px;
        font-size: 16px !important;
    }
    .el-upload{
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 16px;
    }
    .el-upload-list--picture-card .el-upload-list__item{
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 16px;
    }

    .el-upload-list--picture-card .el-upload-list__item-actions:hover {
        opacity: 1;
        font-size: 16px;
    }

    .el-upload-list--picture-card .el-upload-list__item-thumbnail{
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 16px;
    }
    


</style>
